<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
<!--      <div class="titleName">标准信息目录</div>-->
      <el-row class="JNPF-common-search-box">
        <el-form>
                        <el-col :span="5">
                          <el-form-item label="标准状态">
                            <el-select
                              v-model="value2"
                              value-key="value2"
                              multiple
                              collapse-tags
                              @change="rowStateItem"
                              style="margin-left: 20px;"
                              placeholder="请选择">
                              <el-option
                                v-for="(item,index) in statesXM"
                                :key="item.val"
                                :label="item.val"

                                :value="item.val">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                          <el-form-item label="时间状态">
                            <el-select
                              v-model="value3"
                              value-key="value3"
                              collapse-tags
                              @change="XDdateItem"
                              style="margin-left: 20px;"
                              placeholder="请选择">
                              <el-option
                                v-for="(item,index) in XDdate"
                                :key="item"
                                :label="item"
                                :value="index">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10">
                          <el-input
                            placeholder="请输入标准中文名称"
                            style="width: 300px; margin-right: 30px"
                            v-model="queryParams.keyWord"
                            @keyup.enter.native="getList"
                            clearable
                          >
                          </el-input>
                          <el-button type="primary" @click="getList()"> 查询 </el-button>
                          <el-button
                            type="warning"
                            plain
                            icon="el-icon-download"
                            :loading="exportLoading"
                            @click="handleExport"
                          >导出</el-button>
                          <el-button
                            type="warning"
                            plain
                            :loading="exportLoading"
                            @click="talcta"
                          >数据来源</el-button>
                        </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
          <el-table :data="list" :row-style="{height:'56px'}">
            <el-table-column fixed   align="center" prop="id" label="#" width="100">
            </el-table-column>
            <el-table-column
              fixed
              prop="ACT_DATE"
              align="center"
              label="发布日期"
            >
            </el-table-column>
            <el-table-column
              prop="ISSUE_DATE"
              align="center"
              label="实施日期"
              :formatter="fmtLength"
            >
            </el-table-column>
            <el-table-column prop="c_C_NAME" align="center" :show-overflow-tooltip="true" label="标准中文名称">
            </el-table-column>
            <el-table-column prop="c_STD_CODE" align="center" label="标准号">
            </el-table-column>
            <el-table-column
              prop="STATE"
              label="标准状态"
              align="center"
              class="name-wrapper"
            >
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.STATE }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      :type="
                      scope.row.STATE == '即时实施'
                        ? 'success'
                        : scope.row.STATE == '现行'
                        ? 'info'
                        : scope.row.STATE == '被代替'
                        ? 'info'
                        : 'danger'
                    "
                      size="medium"
                    >
                      {{ scope.row.STATE }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10, 20, 30, 40]"
            class="pagination-container"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTable,poiDownload } from "@/api/monitor/getTableList";
export default {
  name: "index",
  data() {
    return {
      list: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        keyWord: "",
        timeFlag: "",
        type: [],
      },
      statesQB: {
        val: "全部",
        ischecked: true,
      },
      statesXM: [
        {
          val: "即将实施",
          ischecked: false,
        },
        {
          val: "现行",
          ischecked: false,
        },
        {
          val: "被代替",
          ischecked: false,
        },
        {
          val: "废止",
          ischecked: false,
        },
      ],
      XDdate: [
        "全部",
        "近一月",
        "近三月",
        "近半年",
        "近一年",
        "近两年",
        "近三年",
      ],
      active: 0,
      active1: 0,
      selarr: [],
      exportLoading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getTable(this.queryParams).then((response) => {
        console.log(response.headers)
        this.list = response.data;
        this.total = response.total;
      });
    },
   handleExport (){
          poiDownload(this.queryParams).then((res) => {
            console.log(res,'res')
            const link = document.createElement('a')
            let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            // link.download = res.headers['content-disposition'] //下载后文件名
            // var fileName = localStorage.getItem('disposition')
            link.download = res.fileName || '标准信息' //下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }).catch(error => {
            console.log(error)
          })
          // this.$modal.confirm("daochu").then(()=>{
          //   this.exportLoading = true;
          //   return poiDownload(this.queryParams)
          // }).then(res=>{
          //      this.$download.name(res);
          //      this.exportLoading = false;
          // })
    },
    talcta(){
       var http = 'https://std.samr.gov.cn/gb/gbQuery';
      //  window.location.href=http;
       window.open(http,'_blank')
    },
    fmtLength(row, column) {
      if (row.ISSUE_DATE == "null") {
        return "-";
      } else {
        return row.ISSUE_DATE;
      }
    },
    rowStateItem(value) {
      // let arr = [...this.statesXM];
      // console.log(arr);
      // let selarr = [...this.selarr];
      // if (arr[index].ischecked == false) {
      //   arr[index].ischecked = true;
      //   this.statesQB.ischecked = false;
      //   this.queryParams.type.push(item.val);
      //   console.log(this.queryParams.type, "this.queryParams.type");
      //   selarr.push(item);
      // } else {
      //   arr[index].ischecked = false;
      //   var index11 = selarr.indexOf(index);
      //   console.log(this.queryParams.type, index, "---");
      //   var list = this.queryParams.type;
      //   for (let i = 0; i < list.length; i++) {
      //     if (item.val == list[i]) {
      //       list.splice(i, 1);
      //     }
      //   }
      //   selarr.splice(index11, 1);
      //   if (selarr.length == 0) {
      //     this.statesQB.ischecked = true;
      //   }
      // }
      // this.statesXM = arr;
      // this.selarr = selarr;
        if(!value){
            this.queryParams.type = [];
        }else{
            this.queryParams.type=value;
        }
      this.getList();
    },
    rowSateQb(data) {
      if (data.ischecked == false) {
        data.ischecked = true;
        this.selarr = [];
        this.statesXM.forEach((ele) => {
          ele.ischecked = false;
        });
      }
      this.queryParams.type = [];
      this.getList();
    },
    XDdateItem(index) {
      this.active1 = index;
      this.queryParams.timeFlag = "";
      if (index == 0) {
        this.queryParams.timeFlag = "";
      } else {
        this.queryParams.timeFlag = index;
      }

      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;

      .JNPF-common-search-box {
        background: #fff;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        padding: 15px 21px 0;
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:24px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
.titleName{
  text-align: center;
  font-size: 23px;
  padding:20px 0;
  font-weight:600;
}
.rowState {
  display: flex;
  height: 48px;
  line-height: 48px;
  background: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  .rowStateItem {
    display: flex;
    align-items: center;
  }
}
.activeColor {
  // width: 142px;
  height: 34px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #59709d;
  padding: 0 20px;
}
.activeColorActive {
  background: #3d78fc;
  border-radius: 12px;
  // width: 142px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
::v-deep .el-pagination{
  right:100px;
}
</style>
